<template>
  <div class="app-container">

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="日期" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户" width="200">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.userName }}</p>
            <p>邮箱: {{ scope.row.phone }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.userName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
       <el-table-column label="标题">
           <template slot-scope="scope">
               {{scope.row.title}}
           </template>
       </el-table-column>

       <el-table-column label="标签">
           <template slot-scope="scope">
               {{scope.row.classId}}
           </template>
       </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="checkarticle(scope.row.content,scope.row.articleId)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>

import article from '@/api/article'
export default {
  data() {
    return {
      tableData: []
    }
  },
  created() { //页面渲染之前执行，一般调用methods定义的方法
        //调用
        this.getList() 
    },
  methods: {
    getList(){
      article.getList()
                .then(response =>{//请求成功
                    //response接口返回的数据
                    this.tableData = response.data.content;
                    console.log(this.tableData)
                }) 
    },
    checkarticle(test,aid) {
      this.$router.push({name:'skin',params:{con:test,id:aid}})

    }
  }
}
</script>

